<div class="rightDiv">
  <div class="exciseTableDiv">
    <div class="aRow tableTop" *ngIf="showBtns == 1">
<!--      <button nz-button nzType="primary" style="margin-right: 15px;">同步</button>-->
      <button nz-button nzType="primary" (click)="clickAdd()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增
      </button>
    </div>
    <div class="tableDiv" [ngStyle]="{'margin-top': showBtns != 1 ? '15px' : '0'}">
      <nz-table #expandTable [nzShowPagination]="false" [nzData]="listOfMapData">
        <thead>
        <tr>
          <th style="width: 200px">
            <span>部门名称</span>
          </th>
          <th style="width: 200px"><span >部门负责人</span></th>
          <th style="width: 200px"><span >部门领导</span></th>
          <th style="width: 200px"><span>部门电话</span></th>
          <th style="width: 200px"><span>传真</span></th>
          <th style="width: 170px" *ngIf="showBtns == 1">操作</th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let data of expandTable.data">
          <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
            <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
              <td
                [nzIndentSize]="item.level * 20"
                [nzShowExpand]="item.children.length>0"
                [(nzExpand)]="item.expand"
                (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)"
              >
                {{ item.title }}
              </td>
              <td>
                <div class="t-a">{{ item.leader }}</div></td>
              <td><div class="t-a">{{ item.leaderStr }}</div></td>
              <td>
                <div class="t-a">{{ item.telphone }}</div>

              </td>
              <td>
                <div class="t-a">{{ item.fax }}</div></td>
              <td *ngIf="showBtns == 1">
                <div class="t-a">
                  <span class="operaFont firOpera" (click)="editDept(item)" title="编辑">编辑</span>
                  <span class="operaFont firOpera" (click)="addDeptOwn(item)" title="添加子机构">添加子机构</span>
                  <span class="operaFont"
                        nz-popconfirm
                        nzOkType="danger"
                        nzTitle="确定删除该部门吗?"
                        (nzOnConfirm)="deleteDept(item.key)"
                        nzPlacement="top"
                        title="删除"
                  >删除</span>
                </div>

              </td>
            </tr>
          </ng-container>
        </ng-container>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>
<!--新增部门-->
<nz-modal [(nzVisible)]="isVisible"
          nzWidth="530px"
          [nzTitle]="modalTitle"
          [nzContent]="modalContent"
          (nzOnCancel)="isVisible = false"
          [nzFooter]="footModel"
          nzMaskClosable="false"
>
  <ng-template #modalTitle>
    <span *ngIf="!departInfos.id">新增部门</span>
    <span *ngIf="departInfos.id">编辑部门</span>
  </ng-template>
  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm">
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              上级部门
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-tree-select
                style="width: 100%"
                [nzNodes]="listOfMapData"
                nzShowSearch
                [nzDisabled]="rootClear"
                nzPlaceHolder="默认顶级部门"
                formControlName="parentId"
                [(ngModel)]="departInfos.parentId"
              >
              </nz-tree-select>
              <nz-form-explain
                *ngIf="validateForm.get('parentId').dirty && validateForm.get('parentId').errors">
                <span [hidden]="!validateForm.hasError('required','parentId')">上级部门必选</span>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label nzRequired [nzSm]="7">
              部门名称
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <input nz-input placeholder="请输入" [(ngModel)]="departInfos.name" formControlName="name"/>
              <nz-form-explain
                *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">
                <span [hidden]="!validateForm.hasError('required','name')">部门名称必填</span>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              部门负责人
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-select style="width: 100%;" nzMode="multiple" [(ngModel)]="departInfos.leaderId" nzPlaceHolder="请选择部门负责人" formControlName="leader">
                <nz-option *ngFor="let po of headTeacherList;" [nzValue]="po.id" [nzLabel]="po.name"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              部门领导
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <nz-select style="width: 100%;" [(ngModel)]="departInfos.leaderList" nzMode="multiple" nzPlaceHolder="请选择部门领导" formControlName="leaderList">
                <nz-option *ngFor="let po of headTeacherList;" [nzValue]="po.id" [nzLabel]="po.name"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              联系电话
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <input nz-input placeholder="请输入" [(ngModel)]="departInfos.telphone" formControlName="telphone"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label [nzSm]="7">
              传真
            </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="12">
              <input nz-input placeholder="请输入" [(ngModel)]="departInfos.fax" formControlName="fax"/>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </ng-template>
  <ng-template #footModel>
    <button nz-button nzType="default" (click)="isVisible = false">取消</button>
    <button nz-button nzType="primary" [disabled]="!validateForm.valid" (click)="submit()">保存</button>
  </ng-template>
</nz-modal>
